<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五子棋游戏</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }
    canvas {
      background: #e0b76c;
      display: block;
      border: 2px solid #000;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }
    .status {
      margin-top: 20px;
      font-size: 24px;
      text-align: center;
      font-weight: bold;
    }
    .win-message {
      color: red;
      font-size: 32px;
      text-transform: uppercase;
    }
  </style>
</head>
<body>
  <div>
    <canvas id="chessboard" width="750" height="750"></canvas>
    <div class="status" id="status">玩家1（黑子）的回合</div>
  </div>

  <script>
    const canvas = document.getElementById("chessboard");
    const ctx = canvas.getContext("2d");
    const statusText = document.getElementById("status");

    const gridSize = 15; // 15x15 的棋盘
    const cellSize = canvas.width / gridSize;
    let board = Array.from({ length: gridSize }, () => Array(gridSize).fill(0)); // 0: 空, 1: 黑子, 2: 白子
    let currentPlayer = 1; // 1: 玩家1（黑子）, 2: 玩家2（白子）
    let gameOver = false;

    // 棋盘渐变背景
    function drawBoardBackground() {
      const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
      gradient.addColorStop(0, "#e0b76c"); // 浅棕色
      gradient.addColorStop(1, "#d2a45e"); // 深棕色
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // 画棋盘网格
    function drawGrid() {
      ctx.strokeStyle = "#000";
      ctx.lineWidth = 1;

      for (let i = 0; i < gridSize; i++) {
        ctx.beginPath();
        ctx.moveTo(i * cellSize + cellSize / 2, cellSize / 2);
        ctx.lineTo(i * cellSize + cellSize / 2, canvas.height - cellSize / 2);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(cellSize / 2, i * cellSize + cellSize / 2);
        ctx.lineTo(canvas.width - cellSize / 2, i * cellSize + cellSize / 2);
        ctx.stroke();
      }
    }

    // 画棋子
    function drawPiece(x, y, color) {
      const centerX = x * cellSize + cellSize / 2;
      const centerY = y * cellSize + cellSize / 2;
      const radius = cellSize / 2 - 5;

      // 棋子渐变
      const gradient = ctx.createRadialGradient(
        centerX, centerY, radius * 0.6,
        centerX, centerY, radius
      );
      if (color === "black") {
        gradient.addColorStop(0, "#333");
        gradient.addColorStop(1, "#000");
      } else if (color === "white") {
        gradient.addColorStop(0, "#fff");
        gradient.addColorStop(1, "#ccc");
      }

      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
      ctx.fillStyle = gradient;
      ctx.fill();
      ctx.strokeStyle = "#000";
      ctx.stroke();

      // 棋子高光
      ctx.beginPath();
      ctx.arc(centerX - radius * 0.3, centerY - radius * 0.3, radius * 0.2, 0, Math.PI * 2);
      ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
      ctx.fill();
    }

    // 检查是否五子连珠
    function checkWin(x, y) {
      const directions = [
        [1, 0], // 水平
        [0, 1], // 垂直
        [1, 1], // 对角线
        [1, -1], // 反对角线
      ];

      for (const [dx, dy] of directions) {
        let count = 1;
        // 向一个方向检查
        for (let i = 1; i < 5; i++) {
          const nx = x + dx * i;
          const ny = y + dy * i;
          if (nx >= 0 && nx < gridSize && ny >= 0 && ny < gridSize && board[nx][ny] === currentPlayer) {
            count++;
          } else {
            break;
          }
        }
        // 向相反方向检查
        for (let i = 1; i < 5; i++) {
          const nx = x - dx * i;
          const ny = y - dy * i;
          if (nx >= 0 && nx < gridSize && ny >= 0 && ny < gridSize && board[nx][ny] === currentPlayer) {
            count++;
          } else {
            break;
          }
        }
        // 如果五子连珠
        if (count >= 5) {
          return true;
        }
      }
      return false;
    }

    // 处理点击事件
    canvas.addEventListener("click", (e) => {
      if (gameOver) return;

      const rect = canvas.getBoundingClientRect();
      const x = Math.floor((e.clientX - rect.left) / cellSize);
      const y = Math.floor((e.clientY - rect.top) / cellSize);

      if (x >= 0 && x < gridSize && y >= 0 && y < gridSize && board[x][y] === 0) {
        board[x][y] = currentPlayer;
        drawBoardBackground(); // 重新绘制棋盘背景
        drawGrid(); // 重新绘制网格
        drawAllPieces(); // 重新绘制所有棋子

        if (checkWin(x, y)) {
          statusText.innerHTML = `<span class="win-message">玩家${currentPlayer}（${currentPlayer === 1 ? "黑子" : "白子"}）获胜！</span>`;
          gameOver = true;
        } else {
          currentPlayer = currentPlayer === 1 ? 2 : 1;
          statusText.textContent = `玩家${currentPlayer}（${currentPlayer === 1 ? "黑子" : "白子"}）的回合`;
        }
      }
    });

    // 绘制所有棋子
    function drawAllPieces() {
      for (let i = 0; i < gridSize; i++) {
        for (let j = 0; j < gridSize; j++) {
          if (board[i][j] === 1) {
            drawPiece(i, j, "black");
          } else if (board[i][j] === 2) {
            drawPiece(i, j, "white");
          }
        }
      }
    }

    // 初始化
    drawBoardBackground();
    drawGrid();
  </script>
</body>
</html>